/* eslint  react/no-string-refs: 0 */
import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Input, Grid, Form, Message } from '@alifd/next';
import './index.scss';
import request from '../../../../utils/request';
import { host, stringCheck } from '../../../../const';
import MMap from '@/components/mMap';
import classnames from 'classnames';

const { Row, Col } = Grid;
const FormItem = Form.Item;

const formItemLayout = {
    labelCol: { xxs: 6, s: 3, l: 3 },
    wrapperCol: { s: 12, l: 10 },
};


export default class CreateMapForm extends Component {
  static displayName = 'CreateMapForm';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
      super(props);
      this.state = {
          currentPointInfo: {
              point: {
                  lat: '',
                  lng: '',
              },
              zoom: '',
          },
          value: {
              name: '',
              remark: '',
              leftTopStr: '',
              rightDownStr: '',
          },
          imgInfo: null,
          buttoLoading: false,
      };
  }


  beforeUpload = (file, options) => {
      const createMapRequest = {};
      const leftTop = this.state.value.leftTopStr.trim().split(',');
      const rightDown = this.state.value.rightDownStr.trim().split(',');

      createMapRequest.name = this.state.value.name;
      createMapRequest.remark = this.state.value.remark;
      createMapRequest.leftTopLng = leftTop[0];
      createMapRequest.leftTopLat = leftTop[1];
      createMapRequest.rightDownLng = rightDown[0];
      createMapRequest.rightDownLat = rightDown[1];
      createMapRequest.time = new Date().Format('yyyy-MM-dd HH:mm:ss');


      options.data = {
          createMapRequest: JSON.stringify(createMapRequest),
      };
      return options;
  }

  formChange = (value) => {
      this.setState({ value });
  };

  uploadChange = (info) => {
      this.state.imgInfo = info[0];
  }


  submit = () => {
      let postData = {};
      if (stringCheck(this.state.value.name) == null) {
          Message.error('请输入名称');
          return;
      }
      if (stringCheck(`${this.state.currentPointInfo.point.lat}`) == null) {
          Message.error('请选择经纬度');
          return;
      }
      postData = {
          lng: this.state.currentPointInfo.point.lng,
          lat: this.state.currentPointInfo.point.lat,
          zoom: this.state.currentPointInfo.zoom,
          name: this.state.value.name,
          remark: this.state.value.remark,
      };

      request({
          method: 'POST',
          url: `${host}/map`,
          data: postData,
      }).then((res) => {
          const result = res.data;
          if (result.code === 200) {
              Message.success(result.msg);
          } else {
              Message.success(result?.msg || '地图创建失败');
          }
      });
  }

  uploadSuccess = () => {
      Message.success('创建成功');
  }

  uploadError = () => {
      Message.error('创建失败');
  }

  selectCb = (currentPointInfo) => {
      this.setState({
          currentPointInfo,
      });
  }
  render() {
      return (
      // <IceContainer className={classnames('lite-table', styles.wrap)}>

      // <Row style={{ height: '100%' }} >
      //   <Col span={12} style={{ height: '100%', paddingRight: '10px' }} >
      //     <div style={{ width: '100%', height: '66%' }} className={styles.itemWrap} >
      //       {/* <img src={this.state.mapBase64} /> */}
      //       {/* <img src={this.state.battleDetail.mapBase64} /> */}
      //       <MMap list={this.state.allSoliderList} isSelect />
      //     </div>
      // <div className="settings-form">
          <IceContainer className={classnames('lite-table wrap')}>
              <h2 style={styles.formTitle}>创建室外地图</h2>
              <Row>
                  <Col offset={3}>
                      <div className="mapWrap" >

                          <MMap defaultCenter={[118.6532536, 24.9149655]} defaultZoom={10} isShowSearch unRelative isSelect selectCb={this.selectCb} />
                      </div>

                  </Col>
              </Row>

              <Form value={this.state.value} onChange={this.formChange} ref="form">
                  <div style={styles.formContent}>

                      <FormItem
                          size="large"
                          label="中心点："
                          {...formItemLayout}
                          maxLength={10}
                      >
                          {
                              this.state.currentPointInfo.point.lat ? <div style={{ height: '100%', display: 'flex', alignItems: 'center' }} >纬度:{this.state.currentPointInfo.point.lat},&nbsp;&nbsp;&nbsp;&nbsp;经度:{this.state.currentPointInfo.point.lng},&nbsp;&nbsp;&nbsp;&nbsp;缩放倍数:{this.state.currentPointInfo.zoom}</div>
                                  : <div style={{ height: '100%', display: 'flex', alignItems: 'center' }} >请在上面的地图右键选取中心点</div>
                          }

                      </FormItem>
                      <FormItem
                          size="large"
                          label="名称："
                          {...formItemLayout}
                          maxLength={10}
                      >
                          <Input name="name" />
                      </FormItem>

                      <FormItem
                          size="large"
                          label="备注："
                          {...formItemLayout}
                      >
                          <Input name="remark" />
                      </FormItem>


                      <Row style={{ marginTop: 20 }}>
                          <Col offset="3">
                              <Form.Submit
                                  size="large"
                                  type="primary"
                                  style={{ width: 100 }}
                                  onClick={this.submit}
                              >
                  提 交
                              </Form.Submit>
                          </Col>
                      </Row>
                  </div>
              </Form>

          </IceContainer>

      // </div>
      );
  }
}

const styles = {
    label: {
        textAlign: 'right',
    },
    formContent: {
        width: '100%',
        position: 'relative',
    },
    formItem: {
        alignItems: 'center',
        marginBottom: 25,
    },
    formTitle: {
        margin: '0 0 20px',
        paddingBottom: '10px',
        borderBottom: '1px solid #eee',
    },
};
